<template>
	<view class="container">
		<uni-section title="上传头像" type="line">
			<view class="example-body">
				<uni-file-picker v-model="avatarSrc" fileMediatype="image" :limit="1" mode="grid" @select="select($event,'avatarUrl')" />
			</view>
		</uni-section>
		<uni-section title="上传聊天背景" type="line">
			<view class="example-body">
				<uni-file-picker v-model="chartSrc" fileMediatype="image" :limit="1" mode="grid" @select="select($event,'chartBgUrl')" />
			</view>
		</uni-section>
		<uni-section title="上传登录页背景" type="line">
			<view class="example-body">
				<uni-file-picker v-model="loginSrc" fileMediatype="image" :limit="1" mode="grid" @select="select($event,'chartBgUrl')" />
			</view>
		</uni-section>
		<view class="uni-btn-v">
			<button form-type="submit" class='submitBtn' @click="goBack">返回</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarSrc:[],
				loginSrc:[],
				chartSrc:[],
				sourceType: ['album', 'camera'],
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						style: 'dashed',
						radius: 2
					}
				},
				fileLists: [{
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
					extname: 'png',
					name: 'shuijiao.png'
				}, {
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
					extname: 'png',
					name: 'uniapp-logo.png'
				}, {
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
					extname: 'png',
					name: 'shuijiao.png'
				}]
			}
		},
		computed: {
			userID() {
				let res = uni.getStorageSync('userInfo');
				return res?.id;
			}
		},
		methods: {
			select(e,type){
				// 获取选择文件信息
				let {
					tempFiles,
					tempFilePaths
				} = e
				// 获取选择的第一个文件
				let file = tempFiles[0].file
				// 像服务器传递文件信息
				this.uploadImg(tempFilePaths[0],type)
				
			},
			uploadImg(filePath,type) {
				uni.uploadFile({
					url: getApp().globalData.BaseUrl + '/users/UploadImg', 
					// 要上传的资源文件路径
					filePath:filePath,
					// 向服务器提交的key
					name: 'file',
					formData: {
						type,
						userID:this.userID
					},
					success: (res) => {
						console.log(res.data);
					}
				});
			},
			goBack(){
				uni.navigateTo({
					url:'/pages/linkMen/linkMen'
				})
			}

		}
	}
</script>

<style lang="scss">
	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text {
		font-size: 14px;
		color: #333;
	}
</style>
